<template>
  <div class="distributor-setting views-container">
    <div class="distributor-setting-main">
      <el-menu style="margin:0 0 10px 10px;" :default-active="defaultActive" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">基础设置</el-menu-item>
        <el-menu-item index="2">分销商条件</el-menu-item>
        <el-menu-item index="3">佣金设置</el-menu-item>
        <el-menu-item index="4">结算</el-menu-item>
        <el-menu-item index="6">申请协议</el-menu-item>
        <el-menu-item index="5">自定义文字</el-menu-item>
        <el-menu-item v-if="JSON.stringify($store.getters.power).indexOf('wechat')>-1" index="8">关注公众号</el-menu-item>
        <el-menu-item index="9">分享设置</el-menu-item>
        <!-- <el-menu-item index="7">页面背景图</el-menu-item> -->
      </el-menu>
      <section v-show="tabset.basic">
        <div class="wlm-form">
          <div class="wlm-form-content">
            <el-form ref="basic" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="210px" class="retail-form" label-position="right">
              <el-form-item label="是否开启分销">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.is_open">
                  <el-radio label="1">开启</el-radio>
                  <el-radio label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否开启分销等级">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.is_dealer_leave">
                  <el-radio label="1">开启</el-radio>
                  <el-radio label="0">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否显示用户信息">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.is_show_user">
                  <el-radio label="1">开启</el-radio>
                  <el-radio label="2">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="分销层级">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.level">
                  <el-radio label="1">一级分销</el-radio>
                  <el-radio label="2">二级分销</el-radio>
                  <el-radio label="3">三级分销</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="分销商内购">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.self_buy">
                  <el-radio label="1">开启</el-radio>
                  <el-radio label="0">关闭</el-radio>
                </el-radio-group>
                <div class="form-help">如开启，分销商自己购买商品，获得一级佣金</div>
              </el-form-item>
              <el-form-item label="会员即分销" prop="password">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.member_dealer">
                  <el-radio label="1">开启</el-radio>
                  <el-radio label="2">关闭</el-radio>
                </el-radio-group>
                <div class="form-help">开启后成为平台会员自动拥有分销身份</div>
              </el-form-item>
              <el-form-item label="会员分销商" v-if="this.formFormatData.formData.setting.basic.values.member_dealer=='1'">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.old_member_dealer ">
                  <el-radio label="1">之前所有会员立刻成为分销商</el-radio>
                  <el-radio label="2">之后开通会员卡成为分销商</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="佣金到账类型">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.arrivalType">
                  <el-radio label="1">不支持退款立即到账</el-radio>
                  <el-radio label="2">订单完成到账</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="分销渠道" prop="channel">
                <el-checkbox-group v-model="formFormatData.formData.setting.basic.values.channel">
                  <el-checkbox label="2" v-if="JSON.stringify($store.getters.power).indexOf('wxapp')>-1">微信小程序</el-checkbox>
                  <el-checkbox label="3" v-if="JSON.stringify($store.getters.power).indexOf('H5')>-1">H5</el-checkbox>
                  <el-checkbox label="4" v-if="JSON.stringify($store.getters.power).indexOf('wechat')>-1">微信公众号</el-checkbox>
                  <el-checkbox label="7" v-if="JSON.stringify($store.getters.power).indexOf('aliapp')>-1">支付宝小程序</el-checkbox>
                  <el-checkbox label="9" v-if="JSON.stringify($store.getters.power).indexOf('toutiaoapp')>-1">抖音-头条</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="支付后是否发送预计到账模板">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.is_send_template">
                  <el-radio label="1">不发送</el-radio>
                  <el-radio label="2">发送</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="个人中心是否显示分销样式">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.user_diy">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="分销等级跳转样式" prop="password">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.lave_diy">
                  <el-radio label="1">跳转页面</el-radio>
                  <el-radio label="2">提示弹窗</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="团队统计样式" prop="password">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.team_diy">
                  <el-radio label="1">默认样式</el-radio>
                  <el-radio label="2">O2O样式</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否显示分销中心" prop="password">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.is_show">
                  <el-radio label="1">显示</el-radio>
                  <el-radio label="2">不显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否显示立即加入样式" prop="password">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.show_join_or_not">
                  <el-radio label="1">显示</el-radio>
                  <el-radio label="2">不显示</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="formFormatData.formData.setting.basic.values.show_join_or_not==1">
                    <el-form-item label="标题样式" prop="password">
                    <el-input placeholder="限制15字以内" v-model="formFormatData.formData.setting.basic.values.in_join_title" maxlength="15"></el-input>
                    <div class="form-help">限制字数{{formFormatData.formData.setting.basic.values.in_join_title? formFormatData.formData.setting.basic.values.in_join_title.length :0}}/15</div>
                  </el-form-item>
                 <el-form-item label="标题描述" prop="password">
                    <el-input placeholder="请输入" v-model="formFormatData.formData.setting.basic.values.in_join_content"></el-input>
                          <!-- 限制字数{{formFormatData.formData.setting.basic.values.in_join_content? formFormatData.formData.setting.basic.values.in_join_content.length:0}}/15 -->
                    <div class="form-help">

                        <div>
                            可用变量：分销佣金
                           <span class="pointer" @click="handleClipboard('{$dealer_money}',$event)">
                              {$dealer_money}
                           </span>
                        </div>
                      </div>
                </el-form-item>
              </div>
              <el-form-item label="我的店铺链接是否可复制链接" prop="password">
                <el-radio-group v-model="formFormatData.formData.setting.basic.values.my_shop_is_copy">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="formFormatData.formData.setting.basic.values.my_shop_is_copy==1">
                    <el-form-item label="复制标题描述" prop="password">
                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" placeholder="请输入" v-model="formFormatData.formData.setting.basic.values.shop_copy_text"></el-input>
                  </el-form-item>
              </div>
            </el-form>

          </div>
        </div>
      </section>
      <!-- 分销商条件 -->
      <section v-show="tabset.conditions">
        <div class="wlm-form">
          <div class="wlm-form-content">
            <el-form ref="conditions" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="210px" class="retail-form" label-position="right">
              <el-form-item label="成为分销商条件" prop="username">
                <el-radio-group v-model="formFormatData.formData.setting.condition.values.become" @change='getValue(formFormatData.formData.setting.condition.values.become)'>
                  <el-radio label="1">无条件</el-radio>
                  <el-radio label="2">申请</el-radio>
                  <el-radio label="3">购买商品</el-radio>
                  <el-radio label="4">购买会员卡</el-radio>
                </el-radio-group>
                <el-select v-show="formFormatData.formData.setting.condition.values.become==4" v-model="formFormatData.formData.setting.condition.values.become__buy_member" multiple placeholder="请选择">
                  <el-option v-for="item in categoryData" :key="item.card_id" :label="item.card_title" :value="`${item.card_id}`"></el-option>
                </el-select>
                <choose-goods v-show="formFormatData.formData.setting.condition.values.become==3" ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="conditionGoodsChange"></choose-goods>
                <div class="form-help" v-if="formFormatData.formData.setting.condition.values.become==3">购买指定商品付款后自动成为分销商，无需后台审核</div>
              </el-form-item>
              <el-form-item v-if="formFormatData.formData.setting.condition.values.become==2" label="是否审核" prop="nickname">
                <el-radio-group v-model="formFormatData.formData.setting.condition.values.apply">
                  <el-radio label="1">审核</el-radio>
                  <el-radio label="2">不审核</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="成为下线条件" prop="password">
                <el-radio-group v-model="formFormatData.formData.setting.condition.values.downline">
                  <el-radio label="1">首次点击分享链接</el-radio>
                  <el-radio label="2">首次支付</el-radio>
                  <el-radio label="3">首次下单</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="关系生成" v-if="formFormatData.formData.setting.condition.values.downline=='2'">
                <el-radio-group v-model="formFormatData.formData.setting.condition.values.relation">
                  <el-radio label="1">首单产生关系</el-radio>
                  <el-radio label="2">次单产生关系</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否开启分销保护期">
                <el-switch active-value="1" inactive-value="2" v-model="formFormatData.formData.setting.condition.values.is_protect"></el-switch>
                <p class="form-help">请谨慎修改保护周期，实际运营中变换可能会导致分销数据错乱</p>
              </el-form-item>
              <el-form-item label="分销保护周期（分钟）" v-show="formFormatData.formData.setting.condition.values.is_protect==1">
                <el-input-number :controls="false" v-model.number="formFormatData.formData.setting.condition.values.protect_hour" :min="0"></el-input-number>
                <p class="form-help">1.在保护周期内分销员发展的下线不会被别人抢走，过了保护期，用户扫码其他分销员的二维码会改变隶属关系；</p>
                <p class="form-help">2.分销保护周期为0时即为动态上级，非分销商的用户不会有锁定的上级，用户购买产生的佣金分发给分享给他的分销商。</p>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </section>
      <!-- 佣金设置 -->
      <section v-show="tabset.commission">
        <div class="wlm-form">
          <div class="wlm-form-content">
            <el-form ref="commission" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="210px" class="retail-form" label-position="right">
              <el-form-item label="默认等级名称">
                <el-input v-model="formFormatData.formData.setting.commission.values.leave_title"></el-input>
              </el-form-item>
              <el-form-item label="分销佣金类型">
                <el-radio-group v-model="formFormatData.formData.setting.commission.values.dealer_money_type" @change="labelChange">
                  <el-radio label="10">百分比</el-radio>
                  <el-radio v-if="formFormatData.formData.setting.commission.values.dealer_money_type!='10'" label="20">固定金额</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="changelabel=='10'?'一级佣金比例':'一级佣金金额'" prop="setting.commission.values.first_money" :rules="[{ required: true, message: '请输入一级佣金', trigger: 'blur' }]">
                <el-input-number v-if="changelabel=='10'" :controls="false" v-model.number="formFormatData.formData.setting.commission.values.first_money" :min="0" :max="100"></el-input-number>
                <el-input-number v-if="changelabel=='20'" :controls="false" v-model.number="formFormatData.formData.setting.commission.values.first_money" :min="0.01"></el-input-number>
                <div class="form-help" v-if="changelabel=='10'">佣金比例范围 0% - 100%</div>
                <div class="form-help" v-if="changelabel=='20'">单个商品固定佣金大于0</div>
              </el-form-item>
              <el-form-item :label="changelabel=='10'?'二级佣金比例':'二级佣金金额'" prop="setting.commission.values.second_money" :rules="[{ required: true, message: '请输入二级佣金', trigger: 'blur' }]" v-if="formFormatData.formData.setting.basic.values.level==2||formFormatData.formData.setting.basic.values.level==3">
                <el-input-number v-if="changelabel=='10'" :controls="false" v-model.number="formFormatData.formData.setting.commission.values.second_money" :min="0" :max="100"></el-input-number>
                <el-input-number v-if="changelabel=='20'" :controls="false" v-model.number="formFormatData.formData.setting.commission.values.second_money" :min="0.01"></el-input-number>
                <div class="form-help" v-if="changelabel=='10'">佣金比例范围 0% - 100%</div>
                <div class="form-help" v-if="changelabel=='20'">单个商品固定佣金大于0</div>
              </el-form-item>
              <el-form-item :label="changelabel=='10'?'三级佣金比例':'三级佣金金额'" prop="setting.commission.values.third_money" :rules="[{ required: true, message: '请输入三级佣金', trigger: 'blur' }]" v-if="formFormatData.formData.setting.basic.values.level==3">
                <el-input-number v-if="changelabel=='10'" :controls="false" v-model.number="formFormatData.formData.setting.commission.values.third_money" :min="0" :max="100"></el-input-number>
                <el-input-number v-if="changelabel=='20'" :controls="false" v-model.number="formFormatData.formData.setting.commission.values.third_money" :min="0.01"></el-input-number>
                <div class="form-help" v-if="changelabel=='10'">佣金比例范围 0% - 100%</div>
                <div class="form-help" v-if="changelabel=='20'">单个商品固定佣金大于0</div>
              </el-form-item>
              <el-form-item label="商品详情页佣金展示对象">
                <el-radio-group v-model="formFormatData.formData.setting.commission.values.obj">
                  <el-radio label="1">仅分销商</el-radio>
                  <el-radio label="2">所有用户</el-radio>
                </el-radio-group>
                <p class="form-help">普通用户点击佣金展示，跳转至申请分销商界面</p>
              </el-form-item>
              <el-form-item label="商品详情佣金展示类型">
                <el-radio-group v-model="formFormatData.formData.setting.commission.values.type">
                  <el-radio label="1">最高可得</el-radio>
                  <el-radio label="2">总佣金</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="商品详情佣金展示样式">
                <el-radio-group v-model="formFormatData.formData.setting.commission.values.diy">
                  <el-radio label="1">邀请好友上方</el-radio>
                  <el-radio label="2">悬浮固定</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </section>
      <!-- 结算 -->
      <section v-show="tabset.settlement">
        <div class="wlm-form">
          <div class="wlm-form-content">
            <el-form ref="settlement" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="210px" class="retail-form" label-position="right">
              <el-form-item label="提现方式" prop="setting.settlement.values.pay_type">
                <el-checkbox-group v-model="formFormatData.formData.setting.settlement.values.pay_type">
                  <el-checkbox label="20">支付宝</el-checkbox>
                  <el-checkbox label="30">银行卡</el-checkbox>
                  <el-checkbox label="10">微信</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="最低提现额度" prop="nickname">
                <el-input-number :controls="false" v-model="formFormatData.formData.setting.settlement.values.min_money" :min="1"></el-input-number>
                <p class="form-help">最低提现金额大于或等于1元</p>
              </el-form-item>
              <el-form-item label="佣金结算天数">
                <el-input-number @change="newGiftChange(formFormatData.formData.setting.settlement.values,'settle_days')" :controls="false" v-model="formFormatData.formData.setting.settlement.values.settle_days" :min="0"></el-input-number>
                <div class="form-help">当订单完成n天后，该订单的分销佣金才会结算到分销商余额，如果设置为0天 则订单完成时就结算</div>
                <div class="form-help">注：建议佣金结算天数大于允许发起售后申请天数，如果用户申请退款退货 则不结算佣金，如果商品不支持退款，佣金会立刻到账</div>
              </el-form-item>
              <el-form-item label="默认提现手续费">
                <div class="input-slot flex-row flex-align-c flex-justify-s wlm-input-appendbox">
                  <el-input-number :controls="false" :min="0" :max="100" v-model="formFormatData.formData.setting.settlement.values.commission"></el-input-number>
                  <div class="wlm-input-append append-right">%</div>
                </div>
                <div class="form-help">提现时平台将收取的手续费</div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </section>
      <!-- 自定义文字 -->
      <section v-show="tabset.customText">
        <div class="wlm-form">
          <div class="wlm-form-content">
            <el-form ref="customText" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="210px" class="retail-form" label-position="right">
              <el-form-item label="分销商" v-if="formFormatData.formData.setting.diy_font.values.fxs">
                <el-input placeholder="分销商" v-model="formFormatData.formData.setting.diy_font.values.fxs.diy"></el-input>
              </el-form-item>
              <el-form-item label="申请分销商">
                <el-input placeholder="申请分销商" v-model="formFormatData.formData.setting.diy_font.values.apply.diy"></el-input>
              </el-form-item>
              <el-form-item label="分销商权益" prop="nickname">
                <el-input placeholder="分销商权益" v-model="formFormatData.formData.setting.diy_font.values.equity.diy"></el-input>
              </el-form-item>
              <el-form-item label="分销中心" prop="password">
                <el-input placeholder="分销中心" v-model="formFormatData.formData.setting.diy_font.values.center.diy"></el-input>
              </el-form-item>
              <el-form-item label="我的资产" prop="repassword">
                <el-input placeholder="我的资产" v-model="formFormatData.formData.setting.diy_font.values.assets.diy"></el-input>
              </el-form-item>
              <el-form-item label="全部团队" prop="repassword">
                <el-input placeholder="全部团队" v-model="formFormatData.formData.setting.diy_font.values.lv_team.diy"></el-input>
              </el-form-item>
              <el-form-item label="我的团队" prop="repassword">
                <el-input placeholder="我的团队" v-model="formFormatData.formData.setting.diy_font.values.team.diy"></el-input>
              </el-form-item>
              <el-form-item label="本周收益商品上新" prop="repassword">
                <el-input placeholder="本周收益商品上新" v-model="formFormatData.formData.setting.diy_font.values.new.diy"></el-input>
              </el-form-item>
              <el-form-item label="提交审核" prop="repassword">
                <el-input placeholder="提交审核" v-model="formFormatData.formData.setting.diy_font.values.to_examine.diy"></el-input>
              </el-form-item>
              <el-form-item label="提现明细" prop="repassword">
                <el-input placeholder="提现明细" v-model="formFormatData.formData.setting.diy_font.values.detailed.diy"></el-input>
              </el-form-item>
              <el-form-item label="商品" prop="repassword">
                <el-input placeholder="商品" v-model="formFormatData.formData.setting.diy_font.values.goods.diy"></el-input>
              </el-form-item>
              <el-form-item label="级别" prop="repassword">
                <div class="flex-row">
                  <el-input placeholder="一级团队" v-model="formFormatData.formData.setting.diy_font.values.lv_one.diy" style="width:90px;margin-right:20px"></el-input>
                  <el-input placeholder="二级团队" v-model="formFormatData.formData.setting.diy_font.values.lv_two.diy" style="width:90px;margin-right:20px"></el-input>
                  <el-input placeholder="三级团队" v-model="formFormatData.formData.setting.diy_font.values.lv_three.diy" style="width:90px;"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="下线" prop="repassword">
                <div class="flex-row">
                  <el-input placeholder="一级下线" v-model="formFormatData.formData.setting.diy_font.values.offline_one.diy" style="width:90px;margin-right:20px"></el-input>
                  <el-input placeholder="二级下线" v-model="formFormatData.formData.setting.diy_font.values.offline_two.diy" style="width:90px;margin-right:20px"></el-input>
                  <el-input placeholder="三级下线" v-model="formFormatData.formData.setting.diy_font.values.offline_three.diy" style="width:90px;"></el-input>
                </div>
              </el-form-item>
              <!-- <el-form-item label="分销商" prop="repassword">
                            <el-input placeholder="分销商" v-model="formFormatData.formData.setting.diy_font.values.distributor.diy">
                            </el-input>
              </el-form-item>-->
              <el-form-item label="邀请开店" prop="repassword">
                <div class="flex-row">
                  <el-input placeholder="邀请开店" v-model="formFormatData.formData.setting.diy_font.values.up_shop.diy" style="width:130px;margin-right:20px"></el-input>
                  <el-input placeholder="成为店长得盈利" v-model="formFormatData.formData.setting.diy_font.values.managerProfit.diy" style="width:130px;margin-right:20px"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="邀请会员" prop="repassword">
                <div class="flex-row">
                  <el-input placeholder="邀请会员" v-model="formFormatData.formData.setting.diy_font.values.member.diy" style="width:130px;margin-right:20px"></el-input>
                  <el-input placeholder="多重礼遇享收益" v-model="formFormatData.formData.setting.diy_font.values.memberProfit.diy" style="width:130px;margin-right:20px"></el-input>
                </div>
              </el-form-item>
              <el-form-item label="我的客户" prop="repassword">
                <el-input placeholder="我的客户" v-model="formFormatData.formData.setting.diy_font.values.customer.diy"></el-input>
              </el-form-item>
              <el-form-item label="推广记录" prop="repassword">
                <el-input placeholder="推广记录" v-model="formFormatData.formData.setting.diy_font.values.record.diy"></el-input>
              </el-form-item>
              <el-form-item label="我的店铺" prop="repassword">
                <el-input placeholder="我的店铺" v-model="formFormatData.formData.setting.diy_font.values.my_shop.diy"></el-input>
              </el-form-item>
              <el-form-item label="分销佣金" prop="repassword">
                <el-input placeholder="分销佣金" v-model="formFormatData.formData.setting.diy_font.values.commission.diy"></el-input>
              </el-form-item>
              <el-form-item label="下单即得佣金" prop="repassword">
                <el-input placeholder="下单即得佣金" v-model="formFormatData.formData.setting.diy_font.values.buy_commission.diy"></el-input>
              </el-form-item>
              <el-form-item label="直销赚" prop="repassword">
                <el-input placeholder="直销赚" v-model="formFormatData.formData.setting.diy_font.values.d_selling.diy"></el-input>
              </el-form-item>
              <el-form-item label="团销赚" prop="repassword">
                <el-input placeholder="团销赚" v-model="formFormatData.formData.setting.diy_font.values.g_selling.diy"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </section>
      <!-- 申请协议 -->
      <section v-show="tabset.agreement">
        <div class="wlm-form">
          <div class="wlm-form-content">
            <el-form ref="agreement" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="210px" class="retail-form" label-position="right">
              <el-form-item label="分销商申请协议" prop="username">
                <!-- <el-input type="textarea" :autosize="{ minRows: 4}" v-model="formFormatData.formData.setting.license.values.license">
                </el-input>-->
                <ueditor :ueditorChange="agreenInfoChange" :defaultMsg="defaultMsg" :config="{initialFrameWidth: null,initialFrameHeight: 350}" ref="by_know"></ueditor>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </section>
      <!-- 关注公众号 -->
      <section v-show="tabset.attention">
        <div class="wlm-form">
          <div class="wlm-form-content">
            <el-form ref="attention" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="210px" class="retail-form" label-position="right">
              <el-form-item label="提示关注公众号">
                <el-switch :active-value="1" :inactive-value="2" v-model="formFormatData.formData.setting.wechat.values.is_dealer_wechat"></el-switch>
                <p class="form-help" v-if="formFormatData.formData.setting.wechat.values.is_dealer_wechat==1">需用户有公众号渠道并且会对接公众平台消息推送</p>
              </el-form-item>
              <el-form-item label="邀请成为分销商海报">
                <el-radio-group v-model="formFormatData.formData.setting.wechat.values.dealer_poster">
                  <el-radio :label="10">普通二维码</el-radio>
                  <el-radio :label="20">关注公众号二维码</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="小程序回复关键字">
                <el-input placeholder="分销" v-model="formFormatData.formData.setting.wechat.values.push_keyword"></el-input>
              </el-form-item>
              <el-form-item label="小程序回复内容">
                <el-input placeholder="点击上图后长按，识别图中二维码即可" v-model="formFormatData.formData.setting.wechat.values.push_content" style="width:80%;"></el-input>
              </el-form-item>
              <el-form-item label="关注后推送图文标题">
                <el-input placeholder="请输入" v-model="formFormatData.formData.setting.wechat.values.push[0]['push_title']" style="width:80%;"></el-input>
              </el-form-item>
              <el-form-item label="关注后推送图文描述">
                <el-input  type="textarea" :autosize="{ minRows: 1, maxRows: 4}" placeholder="请输入" style="width:80%;" v-model="formFormatData.formData.setting.wechat.values.push[0]['push_describe']"></el-input>
              </el-form-item>
              <el-form-item label="关注后推送图文封面">
                <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="sendLogoA"></choose-files>
              </el-form-item>
              <el-form-item label="图文跳转链接">
                <el-radio-group v-model="formFormatData.formData.setting.wechat.values.push[0]['push_type']">
                  <el-radio label="10">首页</el-radio>
                  <el-radio label="20">注册分销商页面</el-radio>
                  <el-radio label="30" :disabled="formFormatData.formData.setting.wechat.values.push[0]['push_type']" v-if="!formFormatData.formData.setting.wechat.values.push[0]['push_type']">自定义跳转</el-radio>
                </el-radio-group>
                <el-input v-if="formFormatData.formData.setting.wechat.values.push[0]['push_type']==30" placeholder="请输入" v-model="formFormatData.formData.setting.wechat.values.push[0]['push_path']"></el-input>
              </el-form-item>
              <section v-if="formFormatData.formData.setting.wechat.values.dealer_poster==20">
                <!-- <el-button type="text" v-if="formFormatData.formData.setting.wechat.values.push.length==1" @click="addShowPush">添加</el-button>
                <el-button type="text" v-if="formFormatData.formData.setting.wechat.values.push.length==2" @click="formFormatData.formData.setting.wechat.values.push.splice(1, 1)">删除</el-button>-->
                <section>
                  <el-form-item label="关注后推送申请分销商图文标题">
                    <el-input placeholder="请输入" v-model="formFormatData.formData.setting.wechat.values.push[1]['push_title']"></el-input>
                  </el-form-item>
                  <el-form-item label="关注后推送申请分销商图文描述">
                    <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" placeholder="请输入" v-model="formFormatData.formData.setting.wechat.values.push[1]['push_describe']"></el-input>
                  </el-form-item>
                  <el-form-item label="关注后推送申请分销商图文封面">
                    <choose-files ref="chooseFiles" :config="chooseLogoBConfig" :changeEvt="sendLogoB"></choose-files>
                  </el-form-item>
                  <!-- <el-form-item label="图文跳转链接">
                                    <el-radio-group v-model="formFormatData.formData.setting.wechat.values.push[1]['push_type']">
                                        <el-radio label="10">首页</el-radio>
                                        <el-radio label="20">注册分销商页面</el-radio>
                                        <el-radio label="30">自定义跳转</el-radio>
                                    </el-radio-group>
                                    <el-input v-if="formFormatData.formData.setting.wechat.values.push[1]['push_type']==30" placeholder="请输入" v-model="formFormatData.formData.setting.wechat.values.push[1]['push_path']">
                                    </el-input>
                  </el-form-item>-->
                </section>
              </section>
            </el-form>
          </div>
        </div>
      </section>
      <!-- 分享设置 -->
      <section v-show="tabset.share">
        <div class="wlm-form">
          <div class="wlm-form-content">
            <el-form ref="share" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="210px" class="retail-form" label-position="right">
              <el-tag effect="plain">邀请分销商分享</el-tag>
              <el-form-item label="标题">
                <el-input v-model="formFormatData.formData.setting.share.values.dealer_title" style="width:80%;"></el-input>
              </el-form-item>
              <el-form-item label="模板变量">
                <div class="flex-row">
                  <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[平台名称]',$event)">[平台名称]</p>
                  <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[用户昵称]',$event)">[用户昵称]</p>
                </div>
                <p class="form-help">点击复制</p>
              </el-form-item>
              <el-form-item label="描述">
                <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="formFormatData.formData.setting.share.values.dealer_describe" style="width:80%;"></el-input>
              </el-form-item>
              <el-form-item label="模板变量">
                <div class="flex-row">
                  <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[平台名称]',$event)">[平台名称]</p>
                  <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[用户昵称]',$event)">[用户昵称]</p>
                </div>
                <p class="form-help">点击复制</p>
              </el-form-item>
              <el-form-item label="封面图">
                <choose-files ref="chooseFiles" :config="imgAAConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                <p class="form-help">大小2M以下,建议尺寸200×200px</p>
              </el-form-item>
              <el-form-item label="小程序封面图">
                <choose-files ref="chooseFiles" :config="imgABConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                <p class="form-help">大小2M以下,建议尺寸500×400px</p>
              </el-form-item>
              <el-form-item label="分享页面背景图">
                <choose-files ref="chooseFiles" :config="imgACConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                <p class="form-help">建议尺寸750×1300px</p>
              </el-form-item>
              <el-tag effect="plain" style="margin-bottom:10px;">我的店铺（分销商品列表）页面分享</el-tag>
              <el-form-item label="标题">
                <el-input v-model="formFormatData.formData.setting.share.values.store_title" style="width:80%;"></el-input>
              </el-form-item>
              <el-form-item label="模板变量">
                <div class="flex-row">
                  <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[平台名称]',$event)">[平台名称]</p>
                  <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[用户昵称]',$event)">[用户昵称]</p>
                </div>
                <p class="form-help">点击复制</p>
              </el-form-item>
              <el-form-item label="描述">
                <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" v-model="formFormatData.formData.setting.share.values.store_describe" style="width:80%;"></el-input>
              </el-form-item>
              <el-form-item label="模板变量">
                <div class="flex-row">
                  <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[平台名称]',$event)">[平台名称]</p>
                  <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[用户昵称]',$event)">[用户昵称]</p>
                </div>
                <p class="form-help">点击复制</p>
              </el-form-item>
              <el-form-item label="封面图">
                <choose-files ref="chooseFiles" :config="imgBAConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                <p class="form-help">大小2M以下,建议尺寸200×200px</p>
              </el-form-item>
              <el-form-item label="小程序封面图">
                <choose-files ref="chooseFiles" :config="imgBBConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                <p class="form-help">大小2M以下,建议尺寸500×400px</p>
              </el-form-item>
              <section v-if="patSetting.plugin.member.open">
                <el-tag effect="plain">邀请开通会员卡分享</el-tag>
                <el-form-item label="开启会员卡分享">
                  <el-switch active-value="1" inactive-value="0" v-model="formFormatData.formData.setting.share.values.member_is_open"></el-switch>
                </el-form-item>
                <el-form-item label="标题">
                  <el-input v-model="formFormatData.formData.setting.share.values.member_title" style="width:80%;"></el-input>
                </el-form-item>
                <el-form-item label="模板变量">
                  <div class="flex-row">
                    <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[平台名称]',$event)">[平台名称]</p>
                    <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[用户昵称]',$event)">[用户昵称]</p>
                  </div>
                  <p class="form-help">点击复制</p>
                </el-form-item>
                <el-form-item label="描述">
                  <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 4}" style="width:80%;" v-model="formFormatData.formData.setting.share.values.member_describe"></el-input>
                </el-form-item>
                <el-form-item label="模板变量">
                  <div class="flex-row">
                    <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[平台名称]',$event)">[平台名称]</p>
                    <p style="margin:0 10px;" class="pointer" @click="handleClipboard('[用户昵称]',$event)">[用户昵称]</p>
                  </div>
                  <p class="form-help">点击复制</p>
                </el-form-item>
                <el-form-item label="封面图">
                  <choose-files ref="chooseFiles" :config="imgCAConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                  <p class="form-help">大小2M以下,建议尺寸200×200px</p>
                </el-form-item>
                <el-form-item label="小程序封面图">
                  <choose-files ref="chooseFiles" :config="imgCBConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                  <p class="form-help">大小2M以下,建议尺寸500×400px</p>
                </el-form-item>
                <el-form-item label="分享页面背景图">
                  <choose-files ref="chooseFiles" :config="imgCCConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                  <p class="form-help">建议尺寸750×1300px</p>
                </el-form-item>
              </section>
            </el-form>
          </div>
        </div>
      </section>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <el-button size="small" @click="saveForm" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
import {
  distributorSetting
} from '@/api/distribution'
import {
  selectedCard
} from '@/api/application'
import power from '@/mixins/power'
import ChooseFiles from '@/components/ChooseFiles/index'
import ueditor from '@/components/Ueditor/index'
import clipboard from '@/utils/clipboard'
import ChooseGoods from '@/components/ChooseGoods/index'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form'), power],
  name: 'DistributorSetting',
  components: {
    ueditor,
    ChooseGoods,
    ChooseFiles
  },
  directives: {

  },
  computed: {
    changelabel() {
      return this.formFormatData.formData.setting.commission.values.dealer_money_type
    }
  },
  created() {
    console.log(this.$store.getters.power, '==========================>this.$store.getters.power')
    this.$nextTick(() => {
      // if (this.formFormatData.formData.setting.condition.values.become == '4') {
      //   selectedCard().then((response) => {
      //     const {
      //       data: {
      //         data: msgData = []
      //       }
      //     } = response
      //     this.categoryData = msgData
      //   })
      // }
      if (this.formFormatData.formData.setting.condition.key == 'condition') {
        selectedCard().then((response) => {
          const {
            data: {
              data: msgData = []
            }
          } = response
          this.categoryData = msgData
        })
      }
      console.log('this.formFormatData.formData.setting.condition', this.formFormatData.formData.setting.condition.key)

      const tabset = this.$route.query.tabset
      if (tabset) {
        Object.keys(this.tabset).map(item => {
          this.tabset[`${item}`] = item === tabset
          if (item === tabset) {
            this.defaultActive = this.defaultMap[`${item}`]
          }
        })
      }
    })
  },
  data() {
    return {
      categoryData: [],
      defaultMsg: '',
      defaultActive: '1',
      defaultMap: {
        basic: '1',
        conditions: '2',
        commission: '3',
        settlement: '4',
        customText: '5',
        agreement: '6',
        bgimage: '7',
        attention: '8',
        share: '9'
      },
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: '',
          model: 'img'
        }
      },
      chooseLogoBConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: '',
          model: 'img'
        }
      },
      //   fggggg
      imgAAConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'setting|share|values|dealer_cover_image',
          model: 'img'
        }
      },
      imgABConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'setting|share|values|dealer_app_image',
          model: 'img'
        }
      },
      imgACConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'setting|share|values|dealer_back_image',
          model: 'img'
        }
      },
      imgBAConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'setting|share|values|store_cover_image',
          model: 'img'
        }
      },
      imgBBConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'setting|share|values|store_app_image',
          model: 'img'
        }
      },
      imgCAConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'setting|share|values|member_cover_image',
          model: 'img'
        }
      },
      imgCBConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'setting|share|values|member_app_image',
          model: 'img'
        }
      },
      imgCCConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'setting|share|values|member_back_image',
          model: 'img'
        }
      },
      chooseGoodsConfig: {
        type: ['chooseGoods'],
        initList: [],
        model: 'display',
        disabled: [{
          label: 'sale_type',
          value: 1
        }]
      },
      tabset: {
        basic: true,
        conditions: false,
        commission: false,
        settlement: false,
        customText: false,
        agreement: false,
        bgimage: false,
        attention: false,
        share: false
      },
      formFormatData: {
        key: ['basic', 'condition', 'commission', 'settlement', 'license', 'diy_font', 'wechat', 'share'],
        api: {
          editForm: {
            api: distributorSetting,
            params: {
              always: true
            },
            filters: {
              img: {
                bindInit: ['imgAAConfig', 'imgABConfig', 'imgACConfig', 'imgBAConfig', 'imgBBConfig', 'imgCAConfig', 'imgCBConfig', 'imgCCConfig']
              }
            }
          },
          submitForm: distributorSetting
        },
        formData: {
          updateSet: '1',
          become__buy_goods: [],
          setting: {
            basic: {
              describe: '基础设置',
              key: 'basic',
              values: {
                is_open: '1',
                lave_diy: '1',
                team_diy: '1',
                is_show: '1',
                show_join_or_not: '2',
                in_join_title: '',
                in_join_content: '',
                is_dealer_leave: '0',
                is_show_user: '1',
                level: '1',
                self_buy: '1',
                arrivalType: '1',
                member_dealer: '2',
                is_send_template: '1',
                user_diy: '2',
                channel: [],
                my_shop_is_copy: '2',
                shop_copy_text: '',
                old_member_dealer: '1'
              }
            },
            condition: {
              describe: '分销商条件',
              key: 'condition',
              values: {
                become: '1',
                become__buy_member: [],
                apply: '1',
                relation: '1',
                downline: '1',
                protect_hour: '',
                is_protect: '2'
              }
            },
            commission: {
              describe: '佣金设置',
              key: 'commission',
              values: {
                leave_title: '',
                obj: '',
                type: '',
                diy: '',
                dealer_money_type: '10',
                first_money: '',
                second_money: '',
                third_money: ''
              }
            },
            settlement: {
              describe: '结算',
              key: 'settlement',
              values: {
                pay_type: [],
                min_money: '',
                settle_days: '',
                commission: ''
              }
            },
            license: {
              describe: '申请协议',
              key: 'license',
              values: {
                license: ''
              }
            },
            diy_font: {
              describe: '自定义文字',
              key: 'diy_font',
              values: {
                apply: { default: '', diy: '' },
                assets: { default: '', diy: '' },
                center: { default: '', diy: '' },
                detailed: { default: '', diy: '' },
                equity: { default: '', diy: '' },
                goods: { default: '', diy: '' },
                lv_one: { default: '', diy: '' },
                lv_three: { default: '', diy: '' },
                lv_two: { default: '', diy: '' },
                new: { default: '', diy: '' },
                team: { default: '', diy: '' },
                lv_team: { default: '', diy: '' },
                to_examine: { default: '', diy: '' },
                fxs: { default: '', diy: '' },
                up_shop: { default: '', diy: '' },
                managerProfit: { default: '', diy: '' },
                d_selling: { default: '', diy: '' },
                g_selling: { default: '', diy: '' },
                customer: { default: '', diy: '' },
                member: { default: '', diy: '' },
                memberProfit: { default: '', diy: '' },
                record: { default: '', diy: '' },
                my_shop: { default: '', diy: '' },
                commission: { default: '', diy: '' },
                buy_commission: { default: '', diy: '' },
                offline_one: { default: '', diy: '' },
                offline_two: { default: '', diy: '' },
                offline_three: { default: '', diy: '' }

              }
            },
            wechat: {
              describe: '关注公众号',
              key: 'wechat',
              values: {
                is_dealer_wechat: 2,
                dealer_poster: 10,
                push_keyword: '',
                push_content: '',
                push: [{
                  push_title: '',
                  push_describe: '',
                  push_type: '10',
                  push_image: [],
                  push_path: ''
                }, {
                  push_title: '',
                  push_describe: '',
                  push_image: []
                }]
              }
            },
            share: {
              describe: '分享设置',
              key: 'share',
              values: {
                dealer_title: '',
                dealer_describe: '',
                dealer_cover_image: [],
                dealer_app_image: [],
                dealer_back_image: [],
                store_title: '',
                store_describe: '',
                store_cover_image: [],
                store_app_image: [],
                member_title: '',
                member_is_open: '1',
                member_describe: '',
                member_cover_image: [],
                member_app_image: [],
                member_back_image: []
              }
            }
          }
        },
        rules: {
          // channel: [{
          //   required: true,
          //   message: '请选择渠道',
          //   trigger: 'blur'
          // }],
          'setting.settlement.values.pay_type': [{
            required: true,
            message: '请选择渠道',
            trigger: 'change'
          }]
        }
      }
    }
  },
  methods: {
    // addShowPush() {
    //   this.formFormatData.formData.setting.wechat.values.push.push({
    //     push_title: '',
    //     push_describe: '',
    //     push_image: []
    //   })
    // },
    getValue(value) {
      if (value == '4') {
        selectedCard().then((response) => {
          const {
            data: {
              data: msgData = []
            }
          } = response
          this.categoryData = msgData
        })
      }
    },
    handOpen() {
      if (this.tabset.conditions == true) {
        console.log(8888888888888888888888888888)
      }
    },
    sendLogoA() {
      const arg = arguments
      this.formFormatData.formData.setting.wechat.values.push[0]['push_image'] = arg[0]['displayData']
    },
    sendLogoB() {
      const arg = arguments
      this.formFormatData.formData.setting.wechat.values.push[1]['push_image'] = arg[0]['displayData']
    },
    conditionGoodsChange(params) {
      const result = []
      const { displayData } = params
      displayData.map(item => {
        result.push({ image: [{ file_path: item.image[0]['file_path'] }], goods_name: item.goods_name, goods_id: item.goods_id, stock_num: item.stock, goods_price: item.goods_min_price })
      })
      this.formFormatData.formData.become__buy_goods = result
    },
    labelChange() {
      this.formFormatData.formData.setting.commission.values.first_money = ''
      this.formFormatData.formData.setting.commission.values.second_money = ''
      this.formFormatData.formData.setting.commission.values.third_money = ''
    },
    saveForm() {
      this.formFormatData.formData.setting.license.values.license = this.defaultMsg
      // if (this.formFormatData.formData.setting.condition.values.become === '3') {
      //   this.$refs.chooseGoods.output()
      // }
      if (this.formFormatData.formData.setting.condition.values.become !== '3') {
        this.formFormatData.formData.become__buy_goods = []
      }
      if (this.formFormatData.formData.setting.condition.values.become === '3' && this.formFormatData.formData.become__buy_goods.length === 0) {
        this.$message.error('保存失败!请选择商品')
      } else {
        this.formFormatSubmit()
      }
    },
    agreenInfoChange(msg) {
      this.defaultMsg = msg
      // this.formFormatData.formData.setting.license.values.license = msg
    },
    handleSelect(key, keyPath) {
      let i = 1
      for (const item of Object.keys(this.tabset)) {
        this.tabset[item] = i === Number(key)
        i++
      }
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { data: { data: { become__buy_goods, setting: { license: { values } } } } } = response
        this.defaultMsg = values.license
        this.$nextTick(() => {
          this.$refs.chooseGoods.displayData = become__buy_goods
        })
      } else if (type === 'editBeforeForm') {
        const { setting: { basic: { values: { channel } }, wechat: { values: { push } } } } = data
        this.chooseLogoConfig.initList = push[0]['push_image']
        if (push.length > 1) {
          this.chooseLogoBConfig.initList = push[1]['push_image']
        }
        if (!Array.isArray(channel)) {
          data.setting.basic.values.channel = []
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.distributor-setting {
  .distributor-setting-main {
    background: #ffffff;
  }

  /deep/ .el-tabs__nav-wrap::after {
    content: "";
    height: 1px;
  }
}
</style>
